﻿<!DOCTYPE html> 
<html> 
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
		.ui-footer{
			border-top-width: 0;
			border-bottom-width: 0;
		}
		p.text{
			font-size : 0.8em;
			font-weight: normal;
			font-family: Tahoma, Ms Sans Serif;
			margin-left: 2em;
		}
		p.date{
			font-size : 0.8em;
			font-weight: bold;
			text-align: right;
			margin-right: 20px;
			font-family: Tahoma, Ms Sans Serif;
		}
		h1{
			font-family: Tahoma, Ms Sans Serif;
		}
		iframe{
			width: 100%;
			position: absolute;
			height: 100%;
		}
		#iframe_container{
			 width: 100%;
			 position: absolute;
			 top: 126px;
			 height: -moz-calc(100% - 126px);
			/* WebKit */
			height: -webkit-calc(100% - 126px);
			/* Opera */
			height: -o-calc(100% - 126px);
			/* Standard */
			height: calc(100% - 126px);
			
		}
	</style>
	<script>
		$(document).ready(function() { 
			$(".graph_selection").change(function(){
				url = $(this).val();
				//console.log(url);
				$("#iframe").attr('src',url); 
				//console.log($("#iframe"));
			});
			url = null;
		});
		
	</script>
</head>
<body>
	
	<div data-role="page">
		<div data-role="header" data-theme="c" data-position="fixed">
			
			<h1>แสดงผลข้อมูลชนิด Interactive Chart</h1>
			<!--<p class="text">ข้อมูลแผนภูมินี้จัดทำขึ้นเพื่อเป็นข้อมูลพื้นฐานในการตัดสินใจโดยใช้ข้อมูลต้นฉบับจากระบบ GIS ทั้งนี้ การนำข้อมูลไปใช้อ้างอิงเพื่อพิจารณาควรตรวจสอบข้อมูลกับหน่วยงานเจ้าของข้อมูลก่อนการตัดสินใจ</p>
			--><p class="date">ปรับปรุงข้อมูลวันที่ 1 ต.ค. 2557 </p>
			<form style="margin-top:-2em; margin-left:10px;">
			<fieldset data-role="controlgroup" data-type="horizontal">
				<select name="graph_selection" class="graph_selection">
					<option value="">------ข้อมูลสินทรัพย์------</option>
					<option value="graph/transmission/dropDownList.php">ความยาวท่อส่งน้ำ</option>
					<option value="graph/watermain/dropDownList.php">ความยาวท่อประธาน</option>
					<option value="graph/dis_pipe/dropDownList.php">ความยาวท่อจ่ายน้ำ</option>
					<option value="graph/valve/valveChart.html">จำนวนประตูน้ำ</option>
					<option value="graph/hydrant/hydrantChart.html">จำนวนหัวดับเพลิง</option>
					<option value="graph/watermain_leak/watermain_leakChart.html">จุดแตกรั่วของท่อประธาน</option>
					<option value="graph/dis_pipe_int_year/dropDownList.php">ท่อจ่ายน้ำแยกตามอายุ</option>
					<option value="graph/transmission_int_year/dropDownList.php">ท่อส่งน้ำแยกตามอายุ</option>
					<option value="graph/watermain_int_year/dropDownList.php">ท่อประธานแยกตามอายุ</option>
				</select>
				<select name="graph_selection" class="graph_selection">
					<option value="">------ข้อมูลพื้นที่------</option>
					<option value="graph/ra_sv_areas/section1.html">พื้นที่จ่ายน้ำ</option>
				</select>
			</fieldset>
			</form>
			
		</div>
		
		<div id="iframe_container"><iframe id="iframe" src='graph/transmission/dropDownList.php' frameBorder="0"></iframe>
		</div>
		
		
	</div><!-- /page -->
</body>
</html>
